import React, { useState } from 'react';

import { Breadcrumb, Layout, Menu, theme } from 'antd';
import { NavLink, Outlet, useNavigate } from 'react-router-dom';
import { homee } from '../../router/Index';

import homkk from '../../components/homkk';
const { Header, Content, Footer, Sider } = Layout;


const App = () => {
    function getItem(label, key, children) {
  return {
    key,
    children,
    label,
  };
}
    const rfdc=(arr)=>{
        let items=[]
        arr&&arr.forEach((item)=>{
            items.push(
                getItem(
                    <NavLink to={`${item.path}?title${item.title}`}>{item.title}</NavLink>,item.path
                )
            )
        })
        return items
    }
    const items=rfdc(homee)



  const [collapsed, setCollapsed] = useState(false);

  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  const naviagte=useNavigate()
  const name=localStorage.getItem('name')
  const tui=()=>{
    localStorage.clear('')
    naviagte('/login')
  }
  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider collapsible collapsed={collapsed} onCollapse={value => setCollapsed(value)}>
        <div className="demo-logo-vertical" />
        <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} />
      </Sider>
      <Layout>
        <Header style={{ padding: 0, background: colorBgContainer }} />
        <Content style={{ margin: '0 16px' }}>
          <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>User</Breadcrumb.Item>
            <Breadcrumb.Item>Bill</Breadcrumb.Item>
            用户名：{name}
            <button onClick={tui}>退出登录</button>
          </Breadcrumb>
          <div
            style={{
              padding: 24,
              minHeight: 360,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            <Outlet></Outlet>
          </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>
          Ant Design ©{new Date().getFullYear()} Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
  );
};
export default homkk(App);